<template>
  <div v-move="true" class="xw-dialog">
    <div class="xw-dialog__header">标题</div>
    <section class="xw-dialog__body">
      <slot>内容</slot>
    </section>
  </div>
</template>

<script setup lang="ts">
// import { Directive, DirectiveBinding } from "vue";
// import { handleMove } from "@/utils/index";
// const vMove: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
//   handleMove(el, binding);
// };
</script>

<style lang="scss" scoped>
@include b(dialog) {
  width: 200px;
  border: 5px solid #333;
  position: fixed;
  top: 50%;
  left: calc(50%);
  z-index: 999;
  background-color: #fff;
  transform: translate(-50%, -50%);
  @include e(header) {
    width: 100%;
    background-color: #333;
    color: #fff;
    height: 26px;
    line-height: 26px;
  }
  @include e(body) {
    width: 100%;
    color: #333;
    min-height: 150px;
    line-height: 26px;
  }
}
</style>
